import React from 'react'
import { UserOutlined } from '@ant-design/icons'
import { size } from 'lodash-es'
import './style.scss'
const MENU_INDEX_CONFIG = [
  {
    name: '首页',
    menuChildren: [],
    isActive: true,
    url: '/index'
  },
  {
    name: '数据中心',
    menuChildren: [],
    isActive: false,
    url: '/promotion'
  },
  {
    name: '产品中心',
    menuChildren: [{ label: '产品图谱' }, { label: '案例锦集' }, { label: '产品认证' }, { label: '帮助中心' }],
    isActive: false
  }
]

interface IProps {
  history?: any
}
interface IStates {}
class Header extends React.PureComponent<IProps, IStates> {
  state = {
    menu: MENU_INDEX_CONFIG
  }
  handleClick = (url?: string) => {
    const { history } = this.props
    url && history.push(url)
  }
  render() {
    return (
      <div className="header-component-box">
        <div className="left">
          <div className="logo"></div>
          <div className="menu">
            {this.state.menu.map((menuItem, index) => (
              <div
                className="index-menuItem-component-box"
                key={`index-menu-item${index.toString()}`} // ****
              >
                <div className="menu-item-title" onClick={() => this.handleClick(menuItem?.url)}>
                  {menuItem.name}
                  {size(menuItem.menuChildren) ? <span className="arrow-icon"></span> : null}
                </div>
                <div className="bottom-line"> </div>
                {menuItem.isActive && <div className="bottom-line-active"></div>}
                {size(menuItem.menuChildren) ? (
                  <div className="menu-children-box">
                    {menuItem.menuChildren.map((menuChild, index) => (
                      <div className="menu-child" key={`menu-child${index.toString()}`}>
                        <span>{menuChild.label}</span>
                      </div>
                    ))}
                  </div>
                ) : null}
              </div>
            ))}
          </div>
        </div>
        <div className="user-info">
          <UserOutlined />
          <span className="user-name">张三</span>
        </div>
      </div>
    )
  }
}

export default Header
